div.timenode
  position: relative
  &:before, &:after
    content: ''
    z-index: 1
    position: absolute
    background: alpha($color-primary, .5)
    width: 2px
    left: 7px
  &:before
    top: 0px
    height: 6px
  &:after
    top: 26px
    height: "calc(100% - %s)" % 26px
  &:last-child
    &:after
      height: "calc(100% - 26px - %s)" % 16px
      border-bottom-left-radius: 2px
      border-bottom-right-radius: 2px
  .meta,.body
    max-width: "calc(100% - %s)" % (16px + 8px)
  .meta
    position: relative
    color: #888
    font-size: 0.875rem
    line-height: 32px
    height: 32px
    &:before, &:after
      content: ''
      position: absolute
      top: 8px
      z-index: 2
    &:before
      background: alpha($color-primary, 0.5)
      width: 16px
      height: 16px
      border-radius: 8px
    &:after
      background: $color-primary
      margin-left: 2px
      margin-top: 2px
      width: 12px
      height: 12px
      border-radius: 6px
      transform: scale(0.5)
      transition: all 0.3s
    p
      font-weight: bold
      margin: 0 0 0 16px + 8px
  .body
    margin: 4px 0 16px 16px + 8px
    padding: 16px
    border-radius: 12px
    background-color: alpha(#f6f6f6, $color-post-contentOpacity)
    display: inline-block
    &:empty
      display: none
    >*
      &:first-child
        margin-top: 1em * 0.25
      &:last-child
        margin-bottom: 1em * 0.25
    .highlight
      border: 1px solid mix(#f6f6f6, #444, 90)


div.timenode:hover
  .meta
    // color: var(--color-text)
    &:before
      background: alpha(#ff5722, 0.5)
    &:after
      background: #ff5722
      transform: scale(1)
